<template>
    <el-form :inline="true" ref="ruleFormRef" :model="formInline" class="demo-form-inline">
        <el-form-item label="审批编号" prop="userId">
            <el-input v-model="formInline.userId" placeholder="请搜索审批编号"  clearable/>
        </el-form-item>
        <el-form-item label="申请人" prop="user">
            <el-input v-model="formInline.user" placeholder="请搜索申请人" clearable />
        </el-form-item>
        <el-form-item label="审批类型" prop="region">
            <el-select v-model="formInline.region" placeholder="请选择审批类型" clearable>
                <el-option label="SL合同审批" value="heTong" />
                <el-option label="SL回款审批" value="huiKuAn" />
                <el-option label="SL权限审批" value="quXian" />
            </el-select>
        </el-form-item>
        <el-form-item label="审批时间" prop="date">
            <el-date-picker v-model="formInline.date" type="date" placeholder="请选择审批时间" clearable  value-format="YYYY-MM-DD"/>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <!-- <el-button type="primary" @click="onresetting">重置</el-button> -->
            <el-button @click="resetForm">重置</el-button>
        </el-form-item>
    </el-form>
    <!-- <el-button type="primary" @click="pilian">批量审批</el-button> -->
    <hr />
</template>

<script setup lang="ts">

import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'

import { noEmptySearchObject } from '@/utils/Tools/query'
import router from '@/router';


interface IProps{
    loadList:(page:number,query:object)=>void
}
const props=defineProps<IProps>()

const ruleFormRef = ref<FormInstance>()
const formInline = reactive({
    userId:'',
    user:'',
    region: '',
    date: ''
})

//查询表单
const onSubmit = () => {
    console.log('submit!')
    let query = noEmptySearchObject(formInline)
    let q={} as any
    if(query !==null){
        q= query
    }
    props.loadList(1,q)
    router.replace({query:{...q,page:1}})
}

//重置表单
const resetForm = () => {
  if (!ruleFormRef.value) return
  ruleFormRef.value.resetFields()
}

//批量审批
const pilian=()=>{
    console.log("aaa");
}

</script>

<style lang="scss" scoped>
.demo-form-inline .el-input {
    --el-input-width: 220px;
}
</style>